import React from 'react';
import Cubox from '../components/Cubox/Cubox';

import "./assets/canvas.css"; 
import "./cubox.css"

const oris = {
	FULL: ['C', 'C', 'C', 'C'],
	TOP: ['L', 'L', 'C', 'C'],
	RIGHT: ['C', 'L', 'L', 'C'],
}

export default {
  title: '1 - Cubox: Fundamental',
  component: Cubox,
	decorators: [
		(Story) => (
			<div className="canvas">
				<Story/>
			</div>
		),
	],
	argTypes: {
		isOutlined: { control: 'boolean', defaultValue:true},
		cornerRadius : {
			control: { type: 'range', min: 5, max:500},
			defaultValue: 125
		},
		strokeWidth : {
			control: {type: 'range', min: 0.5, max: 40},
			defaultValue: 15
		},
		foreColor: {
			type: 'string',
			control: {type: 'color'},
			defaultValue: '#e0e0e0',
		},
		backColor: {
			type: 'string',
			control: {type: 'color'},
			defaultValue: '#282a2e',
		},
		corners: {
			options: ['FULL', 'TOP', 'RIGHT'],
		}
	},
}

const LeftAddon = <div style={{display: 'inline-block', width: 200}}>Yo!</div>;

const Template = (args) => <Cubox {...{...args, LeftAddon}}>
	<div className="box" style={{color: '#c82829'}}>
		{/* <h1>Cubox</h1>
		<div>Cubox is not a functional UI component. It is a general layout tool for
		constructing buttons, text frames, etc.</div> */}
	</div>
</Cubox>;

export const Primary = Template.bind({});

Primary.args = {
	
}
